<template>
	<view style="padding: 20rpx 30rpx;">
		<view class="content" v-for="(item, index) in list" :key="index">
			<view class="heder">
				<view>{{item.plateNo}}</view>
				<view>
					<image src="/static/mda.png" mode="widthFix"></image>
					<view>兑换成功</view>
				</view>
			</view>
			<view class="ofcodr">
				<view class="left">
					<view class="lb">
						<view>停车时长：</view>
						<view>{{item.parkDuration}}分钟</view>
					</view>
					<view class="lb">
						<view>支付时间：</view>
						<view>{{item.createTime | formatDate}}</view>
					</view>
				</view>
				<view class="right">{{item.paidCredit}}积分</view>
			</view>
			<view class="bottm" @click="Navigator(item.id)">
				订单详情 》
			</view>
		</view>
		
		<!-- 加载更多提示（底部） -->
		<view class="load-more" v-if="loading">
			<view class="loading-dot"></view>
			<view class="loading-dot"></view>
			<view class="loading-dot"></view>
			<text>加载更多...</text>
		</view>
		
		<!-- 没有更多数据 -->
		<view class="no-more-data" v-if="!loading && !hasMore">
			<text>没有更多数据了</text>
		</view>
	</view>
</template>

<script>
import { carParkOrder } from '@/core/api/index.js'
export default {
	data() {
		return {
			total: 0,
			list: [],
			currentPage: 1,
			pageSize: 10,
			hasMore: true,
			loading: false
		}
	},
	onLoad() {
		this.getCarParkOrders()
	},
	onReachBottom() {
		// 页面触底时加载更多
		if (!this.loading && this.hasMore) {
			this.getCarParkOrders(true)
		}
	},
	methods: {
		async getCarParkOrders(isLoadMore = false) {
			if (this.loading) return
			
			this.loading = true
			
			if (!isLoadMore) {
				// 重置分页状态（首次加载或切换条件时）
				this.currentPage = 1
				this.list = []
			} else {
				// 加载下一页
				this.currentPage++
			}
			
			try {
				const params = {
					page: this.currentPage,
					size: this.pageSize
				}
				
				const { data } = await carParkOrder(params)
				console.log('获取订单列表:', data)
				
				this.total = data.total || 0
				
				if (isLoadMore) {
					// 追加数据
					this.list = [...this.list, ...data.records]
				} else {
					// 替换数据
					this.list = data.records
				}
				
				// 判断是否还有更多数据
				this.hasMore = this.currentPage * this.pageSize < this.total
				
			} catch (error) {
				console.error('获取订单列表失败:', error)
				if (isLoadMore && this.currentPage > 1) {
					// 请求失败时回退页码
					this.currentPage--
				}
			} finally {
				this.loading = false
			}
		},
		
		Navigator(id) {
			console.log('查看订单详情:', id)
			uni.navigateTo({
				url: '/pages/home/datalist?id=' + id
			})
		}
	}
}
</script>

<style lang="scss">
.content {
	background-color: #fff;
	padding: 0 20rpx;
	border-radius: 10rpx;
	margin-bottom: 15rpx;
	.heder {
		display: flex;
		padding: 30rpx 0;
		justify-content: space-between;
		image {
			width: 23rpx;
			margin-right: 10rpx;
		}
		view:nth-child(1) {
			background: #EFF7FB;
			padding: 2rpx 6rpx;
			border-radius: 10rpx;
		}
		view:nth-child(2) {
			display: flex;
			align-items: baseline;
		}
	}
	.ofcodr {
		padding: 26rpx 0;
		border-top:1rpx solid #eeeeee ;
		border-bottom: 1rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left {
			font-size: 26rpx;
			.lb {
				display: flex;
				margin-bottom: 15rpx;
				view:nth-child(1) {
					color: #A2A2A2;
				}
			}
		}
		.right {
			font-size: 36rpx;
			color: var(--Color, #F26B2E);
		}
	}
	.bottm {
		padding: 30rpx 0;
		justify-content: flex-end;
		display: flex;
		color: var(--, #666);
		font-size: 26rpx;
	}
}

/* 加载更多样式（保持原有风格） */
.load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx 0;
	color: #999;
	font-size: 28rpx;
	margin-top: 20rpx;
	
	.loading-dot {
		width: 16rpx;
		height: 16rpx;
		margin: 0 8rpx;
		background-color: #F26B2E;
		border-radius: 50%;
		animation: loading 1.4s infinite ease-in-out both;
	}
	
	.loading-dot:nth-child(1) {
		animation-delay: -0.32s;
	}
	
	.loading-dot:nth-child(2) {
		animation-delay: -0.16s;
	}
}

/* 没有更多数据 */
.no-more-data {
	text-align: center;
	padding: 30rpx 0;
	color: #999;
	font-size: 28rpx;
	margin-top: 20rpx;
}

@keyframes loading {
	0%, 80%, 100% { transform: scale(0); }
	40% { transform: scale(1); }
}
</style>